<template>
  <div class="content">
    <slot></slot>
    <el-select class="border" @clear="" size="mini" ref="t1" v-model="address.province" @change="provinceT" placeholder="请选择">
      <el-option v-for="item in data" :key="item.name" :value="item.name">
      </el-option>
    </el-select>
    <el-select class="border" @clear=""  size="mini" ref="t2" v-model="address.cityA" @change="cityT" placeholder="请选择">
      <el-option v-for="item in city" :key="item.name" :value="item.name">
      </el-option>
    </el-select>
    <el-select class="border" @clear=""  size="mini" ref="t3" @change="areaT" v-model="address.areaA" placeholder="请选择">
      <el-option v-for="item in area" :key="item.name" :value="item.name">
      </el-option>
    </el-select>
  </div>
</template>
<script>
import { province, city, area } from "@/assets/josn/vue-area";
export default {
  data() {
    return {
      data: province,
      city: [],
      area: [],
      address: {
        province: "",
        city: "",
        area: "",
      },
    };
  },
  created() {},
  methods: {
    provinceT(e) {
      let code = this.data.filter((v1) => v1.name === e)[0].code;
      this.city = [];
      this.area = [];
      this.$set(
        this,
        "city",
        city.filter((v1) => v1.parentId == code)
      );
      this.$refs.t2.$el.childNodes[1].childNodes[1].value = "";
      this.$refs.t3.$el.childNodes[1].childNodes[1].value = "";
      this.address.cityA = '';
      this.address.areaA = '';
      this.$forceUpdate();
      this.onChange();

    },
    cityT(e) {
      let code = this.city.filter((v1) => v1.name === e)[0].code;
      this.$set(
        this,
        "area",
        area.filter((v1) => v1.parentId == code)
      );
      
      this.$refs.t3.$el.childNodes[1].childNodes[1].value = "";
      this.$forceUpdate();
      this.onChange();
    },
    areaT() {
      
      this.$forceUpdate();
      this.onChange();
    },
    clear(){
      this.city = [];
      this.area = [];
      this.$refs.t1.$el.childNodes[1].childNodes[1].value = "";
      this.$refs.t2.$el.childNodes[1].childNodes[1].value = "";
      this.$refs.t3.$el.childNodes[1].childNodes[1].value = "";
    },
    onChange(){
      let temp = this.address;
      let newTemp = [];
      
      // console.log(this.address.cityA);
      
      if(temp.province){
        // let provinceCode = this.data.filter((v1) => v1.name === temp.province)[0].code;
        newTemp.push({code:0,name:temp.province});
      }
      if(temp.cityA){
        // let cityCode = this.city.filter((v1) => v1.name === temp.cityA)[0].code;
        newTemp.push({code:0,name:temp.cityA});
      }
      if(temp.areaA){
        // let araeCode = this.area.filter((v1) => v1.name === temp.areaA)[0].code;
        newTemp.push({code:0,name:temp.areaA});
      }
      
      this.$emit('change',newTemp);
    }
  },
};
</script>
<style lang="scss" scoped>
.border{

  margin-left: 5px;
}

</style>